<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>仪表详情</title>
    <!-- 引入element样式 -->
<!--    <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/element-ui/2.13.1/theme-chalk/index.css">-->
    <link rel="stylesheet" type="text/css" href="../../static/css/index.css">
</head>
<style>
    .el-form-item{
        padding-top: 15px;
        margin-bottom: 0px;
    }
    .el-input{
        width: 350px;
    }
</style>
<body>
<!--border: 1px;box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);-->
    <div id="app" style="height: 100%; width: 700px;margin: 30px auto">
        <p v-if="loadTipDisplay == true" style="text-align: center;">正在读取数据,请稍后...</p>
        <el-form v-if="loadTipDisplay == false" :model="form" style="margin-top: 20px;height: 600px" label-width="172px">
            <el-form-item label="串 口: " >
                <template>
                    <el-select v-model="comPort" filterable placeholder="请选择" >
                        <el-option
                                v-for="item in comPorts"
                                :key="item.name"
                                :label="item.name"
                                :value="item.name">
                        </el-option>
                    </el-select>
                </template>
            </el-form-item>
            <el-form-item label="名称设置: " >
                <el-input v-model="meterName" ></el-input>
            </el-form-item>
            <el-form-item label="仪表型号: " >
                <template>
                    <el-select v-model="meterModel" @change="handleMeterModel" filterable placeholder="请选择" >
                        <el-option
                                v-for="(item, key, index) in meterModels"
                                :key="item.model"
                                :label="item.modelName"
                                :value="item.model">
                        </el-option>
                    </el-select>
                </template>
            </el-form-item>

            <el-form-item label="仪表编号: " >
                <el-input v-model="modbusDeviceId" ></el-input>
            </el-form-item>

            <el-form-item label="AL1报警值: " >
                <el-input v-model="alarm1" v-if="isConnected"></el-input>
                <el-input v-model="disconnectTip" v-if="isConnected == false" :disabled="true"></el-input>
            </el-form-item>
            <el-form-item label="AL2报警值: " >
                <el-input v-model="alarm2" v-if="isConnected"></el-input>
                <el-input v-model="disconnectTip" v-if="isConnected == false" :disabled="true"></el-input>
            </el-form-item>
            <el-form-item label="清零模式: " >
                <template>
                    <el-select v-model="clearMode" @change="handleClearMode" filterable placeholder="请选择" >
                        <el-option
                                v-for="(item, key, index) in clearModes"
                                :key="item.mode"
                                :label="item.modeName"
                                :value="item.mode">
                        </el-option>
                    </el-select>
                </template>
            </el-form-item>
            <el-form-item label="清零执行方式: " v-if="clearMode == 1 || clearMode == 2">
                <template>
                    <el-select v-model="clearLoopType" @change="handleLoopType" filterable placeholder="请选择" >
                        <el-option
                                v-for="(item, key, index) in clearLoopTypes"
                                :key="item.loopType"
                                :label="item.loopName"
                                :value="item.loopType">
                        </el-option>
                    </el-select>
                </template>
            </el-form-item>
            <el-form-item label="定时清零设定: " v-if="clearMode == 1 || clearMode == 2">
                <template>
                    <el-date-picker
                            @change="dateChange"
                            v-model="clearTime"
                            :type = "clearDateType"
                            :format = "clearTimeFormat"
                            value-format="yyyy-MM-dd HH:mm:ss"
                            placeholder="任意时间点">
                    </el-date-picker>
                </template>
            </el-form-item>
            <el-form-item label="计数倍率: " >
                <el-input v-model="scaleRate" v-if="isConnected"></el-input>
                <el-input v-model="disconnectTip" v-if="isConnected == false" :disabled="true"></el-input>
            </el-form-item>

            <el-form-item label="上排显示数据格式: " v-if="meterModel == 1 || meterModel == 2">
                <template>
                    <el-select v-model="dataMode" filterable placeholder="请选择" >
                        <el-option
                                v-for="(item, key, index) in dataModes"
                                :key="item.mode"
                                :label="item.modeName"
                                :value="item.mode"
                                :selected="index==0">
                        </el-option>
                    </el-select>
                </template>
            </el-form-item>
            <el-form-item label="上排显示值寄存器地址: " >
                <el-input v-model="modbusPos" ></el-input>
            </el-form-item>
            <p v-if="loadTipDisplay == false" style="color:#ff0000">{{modbusPosTip}}</p>
            <el-form-item>
                <el-button type="success" :disabled="confirmDisabled"  @click="goSetCounter" plain>{{confirmBtnName}}</el-button>
                <el-button type="danger" @click="deleteMeter">{{delBtnName}}</el-button>
                <el-button type="primary" @click="backIndex">{{backBtnName}}</el-button>
            </el-form-item>

        </el-form>
        </el-form>
    </div>
</body>
<!--<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>-->
<!--<script src="https://cdn.bootcdn.net/ajax/libs/element-ui/2.13.2/index.js"></script>-->
<script src="../../static/js/vue.js"></script>
<script src="../../static/js/index.js"></script>
<script src="../../static/js/axios.min.js"></script>
<script>
    new Vue({
        el: '#app',
        data: {
            data : {},
            form:{
                name:'',
                id:0
            },
            modbusPosTip : '',
            confirmBtnName : '',
            delBtnName : '',
            backBtnName : '',
            confirmDisabled:false,
            isConnected:false,
            checkConnectTimes : 0,
            disconnectTip : '设备未连接',
            loadTipDisplay:true,
            confirmCss:'el-button el-button--info is-plain',
            connectType:3,
            comPort:'',
            baudRate:9600,
            meterName:'',
            meterModel:1,
            modbusDeviceId:1,
            alarm1:'',
            alarm2:'',
            clearMode:0,
            clearLoopType:0,
            clearDateType:'datetime',
            clearTime:'',
            clearTimeFormat:'yyyy-MM-dd HH:mm:ss',
            scaleRate:'1',
            dataMode:0,
            modbusPos:1,
            meterModels: [
                {
                    model: 1,
                    modelName: 'ST76'
                }, {
                    model: 2,
                    modelName: 'CR76'
                }
            ],
            dataModes :[
                {
                    mode : 0,
                    modeName : "请选择"
                }
            ],
            connectTypes : [
                {
                    type:3,
                    connectName:'串口'
                }
            ],
            comPorts : [
                {
                    "name":"请选择"
                }
            ],
            clearModes : [
                {
                    mode:0,
                    modeName:"不清零"
                },
                {
                    mode:1,
                    modeName:'单清零'
                },
                {
                    mode:2,
                    modeName:'双清零'
                }
            ],
            clearLoopTypes :[
                {
                    loopType:0,
                    loopName:'单次清零'
                },{
                    loopType:1,
                    loopName:'循环清零'
                }
            ]
        },
        created:function(){
            var self = this;
            self.form.id = self.getQueryString("id");
            console.log(self.form.id);
            self.checkConnect();
            // 获取仪表信息
            self.findAllModbusType();
            self.details();

        },

        methods: {
            checkConnect : function() {
                var self = this;
                axios.post('http://localhost:8032/device/setCounterIndex', {id: self.form.id}).then(function (res) {
                    if (res.data.code == true) {
                        self.isConnected = true;
                        setTimeout(self.reloadDetails, 5000);
                    } else {
                        if (self.checkConnectTimes < 3) {
                            self.checkConnectTimes = self.checkConnectTimes + 1;
                            setTimeout(self.checkConnect, 1000);
                        } else {
                            self.isConnected = false;
                            self.reloadDetails();
                            self.$notify.error({
                                title: '温馨提示',
                                message: '计数器未连接,请检查连接和设置'
                            });
                        }
                    }
                }).catch(function (error) {
                    if (self.checkConnectTimes < 3) {
                        self.checkConnectTimes = self.checkConnectTimes + 1;
                        setTimeout(self.checkConnect, 1000);
                    } else {
                        self.isConnected = false;
                        self.reloadDetails();
                        self.$notify.error({
                            title: '温馨提示',
                            message: '计数器未连接,请检查连接和设置'
                        });
                    }
                })
            },
            reloadDetails : function() {
                var self = this;
                self.initWords();
                self.details();
                self.loadTipDisplay = false;
            },
            initWords : function() {
                this.confirmBtnName = '确认设置';
                this.delBtnName = '删除仪表';
                this.backBtnName = '返回';
                this.modbusPosTip = 'ST76，BCD默认1，整数默认33，浮点数默认37 。 CR76，整数默13，浮点数默认37';
            },
            dateChange : function() {
                var self = this;
                console.log(self.clearTime);
            },
            handleLoopType : function() {
                var self = this;
                if (self.clearLoopType == 0) { // 单清零
                    self.clearTimeFormat = 'yyyy-MM-dd HH:mm:ss';
                } else if (self.clearLoopType == 1) {
                    self.clearTimeFormat = 'HH:mm:ss';
                }
                console.log(self.clearTimeFormat);
            },
            handleMeterModel : function() {
                var self = this;
                if (self.meterModel == 1) {
                    console.log("ST76 choose");
                    self.dataModes = [
                        {
                            mode: 1,
                            modeName: 'BCD'
                        }, {
                            mode: 2,
                            modeName: '32位整数'
                        }, {
                            mode: 3,
                            modeName: '32位浮点数'
                        }
                    ];
                    if (self.dataMode == 0) {
                        self.dataMode = 1;
                    }
                } else if (self.meterModel == 2) {
                    self.dataModes = [
                        {
                            mode: 2,
                            modeName: '32位整数'
                        }, {
                            mode: 3,
                            modeName: '32位浮点数'
                        }
                    ];
                    if (self.dataMode == 1) {
                        self.dataMode = 2;
                    }
                } else {

                }
            },
            handleClearMode : function() {
                var self = this;
                if (self.clearMode == 1) { // 单清零
                } else if (self.clearMode == 2) {
                } else {
                    self.clearMode = 0;
                }

            },
            findAllModbusType: function() {
                var self = this;
                axios.post('http://localhost:8032/device/findAllModbusType').then(function (res) {
                    if (res.data.code == true) {
                        console.log("通讯接口获取成功");
                        self.comPorts = res.data.data
                    } else {
                        console.log("通讯接口获取失败");
                        self.$notify.error({
                            title: '温馨提示',
                            message: '串口获取失败'
                        });
                        return ;
                    }
                }).catch(function (error) {
                    console.log(error);
                })

            },
            details: function() {
                var self = this;
                axios.post('http://localhost:8032/device/meterDetails',{id: self.form.id,}).then(function (res) {
                    if (res.data.code == true) {
                        if (self.isConnected && !self.loadTipDisplay) {
                            self.$message({
                                type: 'success',
                                message: '计数器信息获取成功!'
                            });
                        }
                        self.data = res.data.data;
                        var resData = res.data.data;
                        self.connectType = resData.connectType;
                        self.dataMode = resData.dataMode;
                        self.comPort = resData.comPort;
                        self.meterModel = resData.meterModel;
                        self.modbusDeviceId = resData.modbusDeviceId;
                        self.modbusPos = resData.modbusPos;
                        self.baudRate = resData.baudRate;
                        self.meterName = resData.meterName;
                        self.clearMode = resData.clearMode;
                        self.clearLoopType = resData.clearLoopType;
                        self.clearTime = resData.displayClearTime;
                        self.alarm1 = resData.displayAlarm1;
                        self.alarm2 = resData.displayAlarm2;
                        self.scaleRate = resData.displayScale;
                        self.handleMeterModel();
                        self.handleClearMode();
                        self.handleLoopType();
                        return ;
                    } else {
                        self.$notify.error({
                            title: '温馨提示',
                            message: '计数器信息获取失败'
                        });
                        return ;
                    }
                }).catch(function (error) {
                    self.$notify.error({
                        title: '温馨提示',
                        message: '计数器信息获取失败'
                    });
                })
            },


            // 获取到url参数的值
            getQueryString: function(name) {
                var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
                var r = window.location.search.substr(1).match(reg); //获取url中"?"符后的字符串并正则匹配
                var context = "";
                if (r != null)
                    context = r[2];
                reg = null;
                r = null;
                return context == null || context == "" || context == "undefined" ? "" : context;
            },
            goSetCounter:function () {
                var self = this;

                // 校验参数
                if (isNaN(self.alarm1) || isNaN(self.alarm2)) {
                    alert(11111);
                    self.$message({
                        type: 'warning',
                        message: '请输入数字',
                        duration: 10000,
                        showClose: true,
                    })
                    return false
                }
                if (Number(self.data.scal) <= 0.0 || Number(self.data.scal) >= 10.0) {
                    self.$message({
                        type: 'warning',
                        message: '超出倍率范围',
                        duration: 10000,
                        showClose: true,
                    })
                    return ;
                }
                var requestParams = {
                    "meterId": self.form.id,
                    "connectType" : self.connectType,
                    "comPort": self.comPort,
                    "meterName":self.meterName,
                    "meterModel":self.meterModel,
                    "dataMode" : self.dataMode,
                    "modbusDeviceId": self.modbusDeviceId,
                    "modbusPos" : self.modbusPos,
                    "clearMode" : self.clearMode,
                    "clearLoopType":self.clearLoopType,
                    "clearTime": self.clearTime
                };
                if (self.alarm1 && self.alarm1 != self.data.displayAlarm1) {
                    requestParams["alarm1"] = self.alarm1;
                }
                if (self.alarm2 && self.alarm2 != self.data.displayAlarm2) {
                    requestParams["alarm2"] = self.alarm2;
                }
                if (self.scaleRate && self.scaleRate != self.data.displayScale) {
                    requestParams["scaleRate"] = self.scaleRate;
                }
                // 确认设置
                // window.location.href = "setCounter.html";
                // 发送请求 删除仪表
                self.confirmDisabled = true;
                axios.post('http://localhost:8032/device/setCounter',requestParams).then(function (res) {
                    if (res.data.code == true) {
                        self.$message({
                            type: 'success',
                            message: '设置成功!'
                        });
                        self.confirmDisabled = false;
                        return ;
                    } else {
                        self.$notify.error({
                            title: '温馨提示',
                            message: res.data.message
                        });
                        self.confirmDisabled = false;
                        return ;
                    }
                }).catch(function (error) {
                    self.confirmDisabled = false;
                    console.log(error);
                })
            },
            backIndex:function () {
                window.history.back(-1);
            },
            deleteMeter:function () {
                var self = this;
                self.$confirm('你确定要删除当前仪表?', '温馨提示',{
                    confirmButtonText: '删除',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(function () {
                    // 发送请求 删除仪表
                    axios.post('http://localhost:8032/device/delete',{
                        id: self.form.id,
                        comPort:self.comPort
                    }).then(function (res) {
                        if (res.data.code == true) {
                            self.$message({
                                type: 'success',
                                message: '删除成功!'
                            });
                            window.location = "allCounter.html";
                            return ;
                        } else {
                            self.$notify.error({
                                title: '温馨提示',
                                message: '删除失败'
                            });
                            return ;
                        }
                    }).catch(function (error) {
                        console.log(error);
                    })
                }).catch(function () {
                    self.$message({
                        type: 'info',
                        message: '已取消删除'
                    })
                })
            },
        }
    })
</script>
</html>